import { createStyles } from "antd-style";

const useStyles = createStyles(({ css, token }) => {
  return {
    indexWrapper: css`
    padding: 16px;
    .search-form{
      margin-bottom: 30px;
    }
    .flowItem{
      background-color: ${token.colorBgContainer};
      border: 1px solid ${token.colorBorder};
      box-shadow: ${token.boxShadow};
      border-radius: 4px;
      position: relative;
      .itemTop{
        display: flex;
        align-items: center;
        height: 160px;

      }
      .itemBottom{
        display: flex;
        justify-content: flex-end;
        padding: 10px 16px;
        background-color: ${token.colorFillQuaternary};
        .ant-btn{
          font-size: 18px;
        }
      }
      .checkboxWrap{
        position: absolute;
        top: 10px;
        left: 10px;
      }
      .imgWrap{
        width: 64px;
        height: 64px;
        margin-left: 20px;
        margin-right: 30px;
      }

      .itemContent{
        padding-right: 20px;
        .title{
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 16px;
        }
        .attrItem{
          display: flex;
          margin-top: 6px;
          .attrKey{
            width: 100px;
            color: ${token.colorTextSecondary};
          }
          .attrValue{
            flex: 1;
            // 强制换行
            word-break:break-all;
            word-wrap:break-word;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2; // 2行
            -webkit-box-orient: vertical;
          }

        }
      }
    }
    `,
    designWrapper: css``,
  }
})

export default useStyles